<template>
    <div id="home">
    <NavBar>
        <template v-slot:default>图书商城</template>

    </NavBar>
    <div class="search" v-show="isShowSearch">
        <van-search v-model="value" placeholder="請輸入書名" @click="onSearch(value)"></van-search>
    </div>
     <back-top @bTop="bTop" v-show="isShowBackTop"></back-top> 
     <tab-control v-show="isTabFixed" @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
    <div class="wrapper">
        <div class="content">
            <!-- 获取dom元素， 通过this.$refs.banref来调用 -->
            <div ref="banref">
                 <div class="search">
                    <van-search
                        v-model="value"
                        placeholder="請輸入書名"
                        @click="onSearch(value)"
                    ></van-search>
                 </div>
              
                
                <!-- <div class="banners">
                    <img src="~assets/images/1.png" alt="">
                </div> -->
                <home-swiper :banners="banners"></home-swiper>
                <!-- <HomeSwiper :banners="banners"></HomeSwiper> -->
                <RecommendView :recommends="recommends"></RecommendView>

            </div>
            </div>
                
            <TabControl @tabClick="tabClick" :titles="['畅销','新书','精选']"></TabControl>
            <GoodsList :goods="searchGoods" v-if="(value!='')"></GoodsList>
            <GoodsList :goods="showGoods" v-if="(value=='')"></GoodsList>
        </div>
        </div>
    
</template>

<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import RecommendView from './ChildComps/RecommendView.vue';
import TabControl from '@/components/content/TabControl.vue';
import GoodsList from '@/components/content/goods/GoodsList.vue';
import BackTop from '@/components/common/backTop/BackTop.vue';
import { getHomeData, getHomeGoods,getSearch } from '@/network/home';
import { ref, reactive, onMounted, computed, watchEffect,nextTick } from "vue";
import HomeSwiper from './ChildComps/HomeSwiper.vue';
import BScroll from 'better-scroll'





// onMounted 是第一次渲染的时候做什么

export default {
    name: "Home",
    setup() {
        const recommends = ref([]);
        const value = ref('');
        let currentType = ref('sales');
        // 是否显示选项卡
        let isTabFixed = ref(false);
        //是否顯示搜索欄
        let isShowSearch=ref(false);
        // 使用ref将Banref当成元素进行绑定
        let banref = ref(null);
        let isShowBackTop = ref(false);
        let bscroll= reactive({});
       let banners = ref([]);
        const tabClick = (index) => {
            // temid.value=index;
            let types = ['sales', 'new', 'recommend'];
            currentType.value = types[index];
            nextTick(()=>{
                    // 重新计算高度
                  bscroll && bscroll.refresh()
                })
            console.log(currentType.value);
        }
        // 商品列表数据模型
        const goods = reactive({
            sales: { page: 0, list: [] },
            new: { page: 0, list: [] },
            recommend: { page: 0, list: [] },
            search:{page:0,list:[]}
        })
        const showGoods = computed(() => {
            return goods[currentType.value].list
        })
        const searchGoods = computed(()=>{
            return goods.search.list
        })
        onMounted(() => {

            getHomeData().then(res => {
                recommends.value = res.goods.data;
                // .then((data)=>{ })里的data是指接口成功返回的数据,包含请求头,请求体,等信息;
                // 这里的then()方法有两个参数,第一个是成功时的回调方法,
                // 默认给这个方法传递了成功的数据,另一个是失败的方法,以及失败的数据,第二个可选,
                banners.value=res.slides;
                console.log(11);
                console.log(res.slides);

            })
            getHomeGoods('sales').then(res => {
                console.log(res);
                goods.sales.list = res.goods.data
            })
            getHomeGoods('recommend').then(res => {
                console.log(res);
                goods.recommend.list = res.goods.data
            })
            getHomeGoods('new').then(res => {
                console.log(res);
                goods.new.list = res.goods.data
            })
            // 创建BetterScroll对象
             bscroll = new BScroll(document.querySelector('.wrapper'), {
                probeType: 3,//0,1,2,3, 3只要在运动就触发scroll事件
                click: true,//是否允许点击
                pullUpLoad: true //上拉加载更多， 默认是false
                
            })
            console.log(bscroll);
            //触发滚动事件
            bscroll.on('scroll', (pos) => {
              console.log(banref.value.offsetHeight);
                // console.log(-pos.y);
                isTabFixed.value=(-pos.y>banref.value.offsetHeight)
                isShowBackTop.value=(-pos.y>banref.value.offsetHeight)
            })
            //上拉加载数据，触发pullingUp(上拉)
            bscroll.on('pullingUp', () => {
                console.log('上拉加载更多');
                const page = goods[currentType.value].page + 1;
                const pages = goods.search.page+1;
                if(value.value==''){
                getHomeGoods(currentType.value, page).then(res => {
                    goods[currentType.value].list.push(...res.goods.data)
                    goods[currentType.value].page += 1

                })
            }else{
                getSearch(value.value,pages).then(res=>{
                    console.log(value.value);
                    goods.search.list.push(...res.goods.data);
                    goods.search.page+=1
                    console.log(goods.search.page);
                    console.log(res); 
                })
            }
                // 完成上拉，等数据请求完成， 要将新数据展示出来
                bscroll.finishPullUp()
                // 重新计算高度
                bscroll.refresh()
                console.log("contenthight:" + document.querySelector('.content').clientHeight);
                if(value.value==''){
                console.log('当前类型:' + currentType.value + ',当前页' + page);
                }else{
                    console.log('当前类型:' + currentType.value + ',当前页' + pages);
                }
            })
        
            // 监听 任何一个变量有变化
            watchEffect(()=>{
                nextTick(()=>{
                    // 重新计算高度
                    bscroll && bscroll.refresh()
                })
            })

        })
        const bTop=()=>{
            bscroll.scrollTo(0,0,500)
        }
        const onSearch=(value)=>{
            nextTick(()=>{
                 // 重新计算高度
                 bscroll && bscroll.refresh()
            })
            console.log('123');
            getSearch(value).then(res=>{
                console.log(value);
                goods.search.list=res.goods.data;
                console.log(res);
            })
        }
        // 商品列表數據模型
        
        return {
            recommends,
            tabClick,
            goods,
            showGoods,
           isShowBackTop,
           isTabFixed,
           banref,
           bTop,
           banners,
           onSearch,
           isShowSearch,
           searchGoods,
           value
        }
    },
    components: {
        HomeSwiper,
        NavBar,
        RecommendView,
        TabControl,
        GoodsList,
        BackTop,
      

    }

}

</script>

<style>
#home {
    height: 100vh;
    position: relative;
}

.wrapper {
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: hidden;
}

.banners img {
    width: 100%;
    height: auto;
    margin-top: 45px;
}
.search{
    z-index: 30;
    margin-top: 45px;
}
</style>
<!-- placeholder：占位符 -->